import { Navigate, useRoutes } from "react-router-dom"
import Login from "../components/Login"

import Main from "../components/Main"
import About from "../components/Main/About"
import Home from "../components/Main/Home"
import Music from "../components/Main/Home/Music"
import News from "../components/Main/Home/News"

import NotFund from "../components/404"

const routes = [
  {
    path: '*',
    element: <NotFund />
  },
  {
    path: '/',
    element: <Navigate to={<Login />} />
  },
  {
    path: '/login',
    element: <Login />
  },
  {
    path: '/main',
    element: <Main />,
    children: [
      {
        path: '/main/about',
        element: <About />
      },
      {
        path: '/main/home',
        element: <Home />,
        children: [
          {
            path: '/main/home/music',
            element: <Music />
          },
          {
            path: '/main/home/news',
            element: <News />
          },
        ]
      }
    ]
  },
]
//第一种方式
export default routes

//第二个种方式 定义组件
export const GetRoutes = () => {
  return useRoutes(routes)
}

//第三种方式自定义hook
export const useMyRoutes = () => {
  return useRoutes(routes)
}